<template>
  <!-- 顶部商品信息区 -->
  <div class="product-top">
    <div class="product-img-wrap">
      <img :src="product.CoverImg" class="product-img" />
    </div>
    <div class="product-info-wrap">
      <div class="product-info-header">
        <h1 class="product-title">{{ product.productName }}</h1>
        <div class="product-btns">
          <el-button @click="Information" class="beauty-btn">修改基本信息</el-button>
          <el-button class="beauty-btn">导出溯源码</el-button>
        </div>
      </div>
      <div class="product-info-row">
        <div>生产批次：<span class="info-value">{{ product.Batch }}</span></div>
        <div>保质期：<span class="info-value">{{ product.QGPeriod }}天</span></div>
      </div>
      <div class="product-info-row">
        <div>生产许可证号：<span class="info-value">{{ product.PLNumber }}</span></div>
        <div>生产企业：<span class="info-value">{{ product.Manufacturer }}</span></div>
      </div>
      <div class="product-section-title">产品检验报告</div>
      <div class="img-list">
        <div v-for="(img, idx) in reportImgs" :key="idx" class="img-item">
          <img :src="img.Img" />
          <span class="img-del" @click="removeReportImg(idx)">×</span>
        </div>
        <el-upload class="img-upload" action="#" :show-file-list="false" :on-change="handleJYImgUpload" :limit="9"
          :auto-upload="false" multiple>
          <div class="img-upload-btn">+</div>
        </el-upload>
      </div>
    </div>
  </div>
  <el-tabs v-model="activeTab" class="beauty-tabs" @tab-change="onTabChange">
    <el-tab-pane :label="`养殖信息 (${yzCompletedCount}/5)`" name="yz"></el-tab-pane>
    <el-tab-pane :label="`屠宰信息 (${tzCompletedCount}/4)`" name="tz"></el-tab-pane>
    <el-tab-pane :label="`深加工信息 (${sjgCompletedCount}/5)`" name="sjg"></el-tab-pane>
  </el-tabs>

  <!-- 养殖信息内容 -->
  <div v-if="activeTab === 'yz'">
    <!-- 养殖信息卡片 -->
    <el-card class="mb24 beauty-card">
      <div class="yz-header-row">
        <span class="yz-title">养殖信息</span>
        <el-button size="small" class="yz-set-btn beauty-btn" @click="showYzDialog = true">设置</el-button>
      </div>
      <el-divider class="beauty-divider" />
      <div class="yz-info-table">
        <div class="yz-info-row">
          <div>品种：<span class="info-value">{{ yzInfo.Variety }}</span></div>
          <div>来源：<span class="info-value">{{ yzInfo.Source }}</span></div>
        </div>
        <div class="yz-info-row">
          <div>饲养天数：<span class="info-value">{{ yzInfo.FeedingDays }}</span></div>
          <div>饲料品牌：<span class="info-value">{{ yzInfo.BreedingBrand }}</span></div>
        </div>
        <div class="yz-info-row">
          <div>饲养负责人：<span class="info-value">{{ yzInfo.BreedingManager }}</span></div>
          <div>出栏日期：<span class="info-value">{{ moment(yzInfo.DateOfSlaughter).format("YYYY-MM-DD") }}</span></div>
        </div>
      </div>
    </el-card>
    <!-- 养殖信息设置弹窗 -->
    <el-dialog v-model="showYzDialog" title="养殖信息" width="700px" :close-on-click-modal="false" @close="onYzDialogClose">
      <el-form :model="yzForm" :rules="yzRules" ref="yzFormRef" label-width="90px" status-icon>
        <el-form-item label="品种" prop="Variety">
          <el-input v-model="yzForm.Variety" maxlength="30" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="来源" prop="Source">
          <el-input v-model="yzForm.Source" maxlength="30" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="饲养天数" prop="FeedingDays">
          <el-input v-model="yzForm.FeedingDays" maxlength="5" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="饲料品牌" prop="BreedingBrand">
          <el-input v-model="yzForm.BreedingBrand" maxlength="30" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="饲养负责人" prop="BreedingManager">
          <el-input v-model="yzForm.BreedingManager" maxlength="30" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="出栏日期" prop="DateOfSlaughter">
          <el-date-picker v-model="yzForm.DateOfSlaughter" type="date" value-format="YYYY-MM-DD" placeholder="选择日期"
            style="width: 100%" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showYzDialog = false">取消</el-button>
        <el-button type="primary" @click="onYzSave">保存</el-button>
      </template>
    </el-dialog>

    <!-- 保健信息 -->
    <el-card class="mb24 beauty-card">
      <div class="section-title-row">
        <span class="section-title-blue">保健信息</span>
        <el-button size="small" class="beauty-btn" @click="addRow">新增行</el-button>
      </div>
      <el-divider class="beauty-divider" />
      <el-table :data="healthList" border class="beauty-table" style="margin-top: 8px;">
        <el-table-column prop="days" label="饲养天数" align="left" header-align="left" min-width="120">
          <template #default="scope">
            <el-input v-if="scope.row.editing" v-model="scope.row.FeedingDays" size="small" class="beauty-input" />
            <span v-else>{{ scope.row.FeedingDays }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="保健方式" align="left" header-align="left" min-width="160">
          <template #default="scope">
            <el-input v-if="scope.row.editing" v-model="scope.row.HealthCareMethod" size="small" class="beauty-input" />
            <span v-else>{{ scope.row.HealthCareMethod }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="method" label="保健方法" align="left" header-align="left" min-width="160">
          <template #default="scope">
            <el-input v-if="scope.row.editing" v-model="scope.row.HealthMethod" size="small" class="beauty-input" />
            <span v-else>{{ scope.row.HealthMethod }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" header-align="left" min-width="140">
          <template #default="scope">
            <template v-if="scope.row.editing">
              <el-button size="small" type="primary" link class="beauty-link"
                @click="saveRow(scope.$index)">保存</el-button>
              <el-button size="small" type="primary" link class="beauty-link"
                @click="cancelEdit(scope.$index)">取消</el-button>
            </template>
            <template v-else>
              <el-button size="small" type="primary" link class="beauty-link"
                @click="editRow(scope.$index)">修改</el-button>
              <el-button size="small" type="primary" link class="beauty-link"
                @click="deleteRow(scope.$index)">删除</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 动检证 -->
    <el-card class="mb24 beauty-card">
      <div class="section-title-blue">动检证</div>
      <div class="img-list mt16">
        <div v-for="(img, idx) in animalCerts" :key="idx" class="img-item big-img-item">
          <img :src="img.Img" />
          <span class="img-del" @click="removeAnimalCert(idx)">×</span>
        </div>
        <el-upload class="img-upload" action="#" :show-file-list="false" :on-change="handleAnimalCertUpload" :limit="9"
          :auto-upload="false" multiple>
          <div class="img-upload-btn big-upload-btn">+</div>
        </el-upload>
      </div>
    </el-card>

    <!-- 企业信息 -->
    <el-card class="mb24 beauty-card">
      <div class="section-title-row">
        <span class="section-title-blue">企业信息</span>
        <el-button size="small" class="beauty-btn" @click="showYzCompanyDialog = true">设置</el-button>
      </div>
      <el-divider class="beauty-divider" />
      <div class="company-info-table">
        <div class="company-info-row">
          <div>养殖场：<span class="info-value">{{ yzCompanyInfo.Farm }}</span></div>
          <div>负责人：<span class="info-value">{{ yzCompanyInfo.Director }}</span></div>
        </div>
        <div class="company-info-row">
          <div>存栏数量：<span class="info-value">{{ yzCompanyInfo.IHNumber }}</span></div>
        </div>
      </div>
    </el-card>
    <!-- 企业信息设置弹窗 -->
    <el-dialog v-model="showYzCompanyDialog" title="企业信息" width="700px" :close-on-click-modal="false"
      @close="onYzCompanyDialogClose">
      <el-form :model="yzCompanyForm" :rules="yzCompanyRules" ref="yzCompanyFormRef" label-width="90px" status-icon>
        <el-form-item label="养殖场" prop="Farm">
          <el-input v-model="yzCompanyForm.Farm" maxlength="30" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="负责人" prop="Director">
          <el-input v-model="yzCompanyForm.Director" maxlength="30" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="存栏数量（只）" prop="IHNumber">
          <el-input v-model="yzCompanyForm.IHNumber" maxlength="5" show-word-limit clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showYzCompanyDialog = false">取消</el-button>
        <el-button type="primary" @click="onYzCompanySave">保存</el-button>
      </template>
    </el-dialog>

    <!-- 企业照片 -->
    <el-card class="mb24 beauty-card">
      <div class="section-title-blue">企业照片</div>
      <div class="img-list mt16">
        <div v-for="(img, idx) in companyImgs" :key="idx" class="img-item big-img-item">
          <img :src="img.Img" />
          <span class="img-del" @click="removeCompanyImg(idx)">×</span>
        </div>
        <el-upload class="img-upload" action="#" :show-file-list="false" :on-change="handleYZCompanyImgUpload"
          :limit="9" :auto-upload="false">
          <div class="img-upload-btn big-upload-btn">+</div>
        </el-upload>
      </div>
    </el-card>
  </div>

  <!-- 屠宰信息内容 -->
  <div v-if="activeTab === 'tz'">
    <!-- 屠宰信息卡片 -->
    <el-card class="mb24 beauty-card">
      <div class="section-title-row">
        <span class="section-title-blue">屠宰信息</span>
        <el-button size="small" class="beauty-btn" @click="showTzDialog = true">设置</el-button>
      </div>
      <el-divider class="beauty-divider" />
      <div class="yz-info-table">
        <div class="yz-info-row">
          <div>批次：<span class="info-value">{{ tzInfo.Batch }}</span></div>
          <div>到厂均重：<span class="info-value">{{ tzInfo.Averageweight }}</span></div>
        </div>
        <div class="yz-info-row">
          <div>到厂时间：<span class="info-value">{{ moment(tzInfo.ArrivalTime).format("YYYY-MM-DD") }}</span></div>
          <div>屠宰时间：<span class="info-value">{{ moment(tzInfo.SlaughterTime).format("YYYY-MM-DD") }}</span></div>
        </div>
      </div>
    </el-card>
    <!-- 屠宰信息设置弹窗 -->
    <el-dialog v-model="showTzDialog" title="屠宰信息" width="700px" :close-on-click-modal="false" @close="onTzDialogClose">
      <el-form :model="tzForm" :rules="tzRules" ref="tzFormRef" label-width="120px" status-icon>
        <el-form-item label="批次" prop="Batch">
          <el-input v-model="tzForm.Batch" maxlength="30" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="到厂均重（公斤）" prop="Averageweight">
          <el-input v-model="tzForm.Averageweight" maxlength="5" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="到厂时间" prop="ArrivalTime">
          <el-date-picker v-model="tzForm.ArrivalTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择日期时间" style="width: 100%" />
        </el-form-item>
        <el-form-item label="屠宰时间" prop="SlaughterTime">
          <el-date-picker v-model="tzForm.SlaughterTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择日期时间" style="width: 100%" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showTzDialog = false">取消</el-button>
        <el-button type="primary" @click="onTzSave">保存</el-button>
      </template>
    </el-dialog>

    <!-- 相关资质 -->
    <el-card class="mb24 beauty-card">
      <div class="section-title-blue">相关资质</div>
      <div class="img-list mt16">
        <div v-for="(img, idx) in slaughterCerts" :key="idx" class="img-item big-img-item">
          <img :src="img.Img" />
          <span class="img-del" @click="removeSlaughterCert(idx)">×</span>
        </div>
        <el-upload class="img-upload" action="#" :show-file-list="false" :on-change="handleSlaughterCertUpload"
          :limit="9" :auto-upload="false">
          <div class="img-upload-btn big-upload-btn">+</div>
        </el-upload>
      </div>
    </el-card>

    <!-- 企业信息 -->
    <el-card class="mb24 beauty-card">
      <div class="section-title-row">
        <span class="section-title-blue">企业信息</span>
        <el-button size="small" class="beauty-btn" @click="showTzCompanyDialog = true">设置</el-button>
      </div>
      <el-divider class="beauty-divider" />
      <div class="company-info-table">
        <div class="company-info-row">
          <div>公司名称：<span class="info-value">{{ tzCompanyInfo.CompanyName }}</span></div>
          <div>成立时间：<span class="info-value">{{ tzCompanyInfo.FoundTime }}</span></div>
        </div>
        <div class="company-info-row">
          <div>公司地址：<span class="info-value">{{ tzCompanyInfo.Province }} {{ tzCompanyInfo.City }} {{
            tzCompanyInfo.Xian }}</span></div>
        </div>
        <div class="company-info-row">
          <div style="width:100%;">公司简介：<span class="info-value">{{ tzCompanyInfo.CompanyProfile }}</span></div>
        </div>
      </div>
    </el-card>
    <!-- 企业信息设置弹窗 -->
    <el-dialog v-model="showTzCompanyDialog" title="企业信息" width="700px" :close-on-click-modal="false"
      @close="onTzCompanyDialogClose">
      <el-form :model="tzCompanyForm" :rules="tzCompanyRules" ref="tzCompanyFormRef" label-width="110px" status-icon>
        <el-form-item label="公司名称" prop="CompanyName">
          <el-input v-model="tzCompanyForm.CompanyName" maxlength="30" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="公司地址" required>
          <el-select v-model="selectedProvince" placeholder="请选择省" style="width: 120px; margin-right: 8px;">
            <el-option v-for="item in provinces" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-select v-model="selectedCity" placeholder="请选择市" style="width: 120px; margin-right: 8px;"
            :disabled="!cities.length">
            <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-select v-model="selectedDistrict" placeholder="请选择区/县" style="width: 120px;"
            :disabled="!districts.length">
            <el-option v-for="item in districts" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="成立时间" prop="FoundTime">
          <el-date-picker v-model="tzCompanyForm.FoundTime" type="date" value-format="YYYY-MM-DD" placeholder="选择日期"
            style="width: 100%" />
        </el-form-item>
        <el-form-item label="公司简介" prop="CompanyProfile">
          <el-input v-model="tzCompanyForm.CompanyProfile" type="textarea" :rows="3" maxlength="500" show-word-limit
            clearable placeholder="选填" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showTzCompanyDialog = false">取消</el-button>
        <el-button type="primary" @click="onTzCompanySave">保存</el-button>
      </template>
    </el-dialog>

    <!-- 企业照片 -->
    <el-card class="mb24 beauty-card">
      <div class="section-title-blue">企业照片</div>
      <div class="img-list mt16">
        <div v-for="(img, idx) in reportTZImgs" :key="idx" class="img-item big-img-item">
          <img :src="img.Img" />
          <span class="img-del" @click="removeTZImg(idx)">×</span>
        </div>
        <el-upload class="img-upload" action="#" :show-file-list="false" :on-change="handleTZImgUpload" :limit="9"
          :auto-upload="false">
          <div class="img-upload-btn big-upload-btn">+</div>
        </el-upload>
      </div>
    </el-card>
  </div>

  <!-- 深加工信息内容 -->
  <div v-if="activeTab === 'sjg'">
    <!-- 深加工信息卡片 -->
    <el-card class="mb24 beauty-card">
      <div class="section-title-row">
        <span class="section-title-blue">深加工信息</span>
        <el-button size="small" class="beauty-btn" @click="openSgjDialog">设置</el-button>
      </div>
      <el-divider class="beauty-divider" />
      <div class="company-info-table">
        <div class="company-info-row">
          <div>班组：<span class="info-value">{{ sjgInfo.Teams }}</span></div>
          <div>负责人：<span class="info-value">{{ sjgInfo.Director }}</span></div>
        </div>
      </div>
    </el-card>
    <!-- 深加工信息弹窗 -->
    <el-dialog v-model="showSgjDialog" title="深加工信息" width="700px" :close-on-click-modal="false"
      @close="onSgjDialogClose">
      <el-form :model="sjgForm" :rules="sjgRules" ref="sjgFormRef" label-width="90px" status-icon>
        <el-form-item label="班组" prop="Teams" required>
          <el-input v-model="sjgForm.Teams" maxlength="30" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="负责人" prop="Director" required>
          <el-input v-model="sjgForm.Director" maxlength="30" show-word-limit clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="onSgjDialogClose">取消</el-button>
        <el-button type="primary" @click="onSgjSave">保存</el-button>
      </template>
    </el-dialog>
    <!-- 食品安全信息 -->
    <el-card class="mb24 beauty-card">
      <div class="section-title-row">
        <span class="section-title-blue">食品安全信息</span>
      </div>
      <el-divider class="beauty-divider" />
      <div class="img-list mt16">
        <div v-for="(img, idx) in sjgFoodSafeImgs" :key="idx" class="img-item">
          <img :src="img.Img" />
          <span class="img-del" @click="removeSjgFoodSafeImg(idx)">×</span>
        </div>
        <el-upload class="img-upload" action="#" :show-file-list="false" :on-change="handleSjgFoodSafeImgUpload"
          :limit="9" :auto-upload="false">
          <div class="img-upload-btn">+</div>
        </el-upload>
      </div>
    </el-card>

    <!-- 供应商信息（原料、辅料、添加剂） -->
    <el-card class="mb24 beauty-card">
      <div class="section-title-row">
        <span class="section-title-blue">供应商信息</span>
      </div>
      <el-divider class="beauty-divider" />
      <!-- 原料 -->
      <div style="margin-bottom: 18px;">
        <div class="yz-info-row">
          <div style="font-weight:bold;display:inline-block;">原料</div>
          <el-button size="small" class="beauty-btn" style="margin-left:12px;"
            @click="openRawSupplierDialog">设置</el-button>
        </div>
        <div class="yz-info-row">
          <div>生产批次：<span class="info-value">{{ rawSupplierInfo.BatchNo }}</span></div>
        </div>
        <div class="yz-info-row">
          <div style="font-weight:bold;">相关材料</div>
        </div>
        <div class="img-list mt16">
          <div v-for="(img, idx) in sjgRawImgs" :key="idx" class="img-item">
            <img :src="img.Img" />
            <span class="img-del" @click="removeSjgRawImg(idx)">×</span>
          </div>
          <el-upload class="img-upload" action="#" :show-file-list="false" :on-change="handleSjgRawImgUpload" :limit="9"
            :auto-upload="false">
            <div class="img-upload-btn">+</div>
          </el-upload>
        </div>
      </div>
      <!-- 辅料 -->
      <div class="supplier-block">
        <div class="yz-info-row">
          <div style="font-weight:bold;display:inline-block;">辅料</div>
          <el-button size="small" class="beauty-btn" style="margin-left:12px;"
            @click="openAssistSupplierDialog">设置</el-button>
        </div>
        <div class="yz-info-row">
          <div>生产批次：<span class="info-value">{{ route.query.Batch }}</span></div>
        </div>
        <div class="yz-info-row">
          <div style="font-weight:bold;">相关材料</div>
        </div>
        <div class="img-list mt16">
          <div v-for="(img, idx) in sjgAssistImgs" :key="idx" class="img-item">
            <img :src="img.Img" />
            <span class="img-del" @click="removeSjgAssistImg(idx)">×</span>
          </div>
          <el-upload class="img-upload" action="#" :show-file-list="false" :on-change="handleSjgAssistImgUpload"
            :limit="9" :auto-upload="false">
            <div class="img-upload-btn">+</div>
          </el-upload>
        </div>
      </div>
      <!-- 辅料弹窗 -->
      <el-dialog v-model="showAssistSupplierDialog" title="供应商信息.辅料" width="700px" :close-on-click-modal="false"
        @close="onAssistSupplierDialogClose">
        <el-form :model="assistSupplierForm" :rules="supplierRules" ref="assistSupplierFormRef" label-width="120px"
          status-icon>
          <el-form-item label="生产批次" prop="BatchNo">
            <el-input v-model="assistSupplierForm.BatchNo" maxlength="30" show-word-limit clearable />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="onAssistSupplierDialogClose">取消</el-button>
          <el-button type="primary" @click="onAssistSupplierSave">保存</el-button>
        </template>
      </el-dialog>
      <!-- 添加剂 -->
      <div class="supplier-block">
        <div class="yz-info-row">
          <div style="font-weight:bold;display:inline-block;">添加剂</div>
          <el-button size="small" class="beauty-btn" style="margin-left:12px;"
            @click="openAddSupplierDialog">设置</el-button>
        </div>
        <div class="yz-info-row">
          <div>生产批次：<span class="info-value">{{ addSupplierInfo.BatchNo }}</span></div>
        </div>
        <div class="yz-info-row">
          <div style="font-weight:bold;">相关材料</div>
        </div>
        <div class="img-list mt16">
          <div v-for="(img, idx) in sjgAddImgs" :key="idx" class="img-item">
            <img :src="img.Img" />
            <span class="img-del" @click="removeSjgAddImg(idx)">×</span>
          </div>
          <el-upload class="img-upload" action="#" :show-file-list="false" :on-change="handleSjgAddImgUpload" :limit="9"
            :auto-upload="false">
            <div class="img-upload-btn">+</div>
          </el-upload>
        </div>
      </div>
      <!-- 添加剂弹窗 -->
      <el-dialog v-model="showAddSupplierDialog" title="供应商信息.添加剂" width="700px" :close-on-click-modal="false"
        @close="onAddSupplierDialogClose">
        <el-form :model="addSupplierForm" :rules="supplierRules" ref="addSupplierFormRef" label-width="120px"
          status-icon>
          <el-form-item label="生产批次" prop="BatchNo">
            <el-input v-model="addSupplierForm.BatchNo" maxlength="30" show-word-limit clearable />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="onAddSupplierDialogClose">取消</el-button>
          <el-button type="primary" @click="onAddSupplierSave">保存</el-button>
        </template>
      </el-dialog>
      <!-- 包材 -->
      <div class="supplier-block">
        <div class="yz-info-row">
          <div style="font-weight:bold;display:inline-block;">包材</div>
          <el-button size="small" class="beauty-btn" style="margin-left:12px;"
            @click="openAddSupplierDialog">设置</el-button>
        </div>
        <div class="yz-info-row">
          <div>生产批次：<span class="info-value">{{ addSupplierInfo.BatchNo }}</span></div>
        </div>
        <div class="yz-info-row">
          <div style="font-weight:bold;">相关材料</div>
        </div>
        <div class="img-list mt16">
          <div v-for="(img, idx) in sjgBCAddImgs" :key="idx" class="img-item">
            <img :src="img.Img" />
            <span class="img-del" @click="removeSjgBCAddImg(idx)">×</span>
          </div>
          <el-upload class="img-upload" action="#" :show-file-list="false" :on-change="handleSjgBCAddImgUpload" :limit="9"
            :auto-upload="false">
            <div class="img-upload-btn">+</div>
          </el-upload>
        </div>
      </div>
      <!-- 包材弹窗 -->
      <el-dialog v-model="showAddSupplierDialog" title="供应商信息.包材" width="700px" :close-on-click-modal="false"
        @close="onAddSupplierDialogClose">
        <el-form :model="addSupplierForm" :rules="supplierRules" ref="addSupplierFormRef" label-width="120px"
          status-icon>
          <el-form-item label="生产批次" prop="BatchNo">
            <el-input v-model="addSupplierForm.BatchNo" maxlength="30" show-word-limit clearable />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="onAddSupplierDialogClose">取消</el-button>
          <el-button type="primary" @click="onAddSupplierSave">保存</el-button>
        </template>
      </el-dialog>
    </el-card>

    <!-- 企业信息 -->
    <el-card class="mb24 beauty-card">
      <div class="section-title-row">
        <span class="section-title-blue">企业信息</span>
        <el-button size="small" class="beauty-btn" @click="openSgjQyDialog">设置</el-button>
      </div>
      <el-divider class="beauty-divider" />
      <div class="company-info-table">
        <div class="company-info-row">
          <div>公司名称：<span class="info-value">{{ sjgQyInfo.CompanyName }}</span></div>
          <div>生产许可证号：<span class="info-value">{{ sjgQyInfo.PNumber }}</span></div>
        </div>
      </div>
    </el-card>
    <!-- 深加工企业信息弹窗 -->
    <el-dialog v-model="showSgjQyDialog" title="企业信息" width="700px" :close-on-click-modal="false"
      @close="onSgjQyDialogClose">
      <el-form :model="sjgQyForm" :rules="sjgQyRules" ref="sjgQyFormRef" label-width="90px" status-icon>
        <el-form-item label="公司名称" prop="CompanyName">
          <el-input v-model="sjgQyForm.CompanyName" maxlength="30" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="生产许可证号" prop="PNumber">
          <el-input v-model="sjgQyForm.PNumber" maxlength="30" show-word-limit clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="onSgjQyDialogClose">取消</el-button>
        <el-button type="primary" @click="onSgjQySave">保存</el-button>
      </template>
    </el-dialog>

    <!-- 企业照片 -->
    <el-card class="mb24 beauty-card">
      <div class="section-title-blue">企业照片</div>
      <div class="img-list mt16">
        <div v-for="(img, idx) in sjgCompanyImgs" :key="idx" class="img-item big-img-item">
          <img :src="img.Img" />
          <span class="img-del" @click="removeSjgCompanyImg(idx)">×</span>
        </div>
        <el-upload class="img-upload" action="#" :show-file-list="false" :on-change="handleSjgCompanyImgUpload"
          :limit="9" :auto-upload="false">
          <div class="img-upload-btn big-upload-btn">+</div>
        </el-upload>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import axios from 'axios'
import moment from 'moment'
import { regionData } from 'element-china-area-data'
const route = useRoute()
const activeTab = ref('yz')
const informationid = ref(1)
const tabIdMap = { yz: 1, tz: 2, sjg: 3 }
function onTabChange(name) {
  informationid.value = tabIdMap[name]
  console.log('当前tab的id:', informationid.value)
  ShowYZCompany()
  ShowTZCompany()
  ShowSJGCompany()
}
const Information=()=>{

  router.push({ path: "/ShowTraceability"})
}
// 页面加载时调用
onMounted(() => {
  ShowBasicTraceability()
  getYJImgs()
  ShowBreed()
  getDJImgs()
  ShowHealth()
  ShowYZCompany()
  getYZCompanyImgs()
  ShowTZInformation()
  getZZImgs()
  ShowTZCompany()
  getTZImgs()
  ShowSJG()
  getAQImgs()
  getRawImgs()
  getAssistImgs()
  getAddImgs()
  getSJGCompanyImgs()
  ShowSJGCompany()
  getAddBCImgs()
})

//顶栏商品信息
const product = ref([])
const ShowBasicTraceability = () => {
  const batch = route.query.Batch
  axios.get("http://localhost:5266/api/BasicTraceability/GetIdBasicTraceability", { params: { Batch: batch } }).then(res => {
    product.value = res.data.Data[0]
  })
}
//产品检验报告
const reportImgs = ref([])
const getYJImgs = () => {
  axios.get('http://localhost:5266/api/Img/GetImg', {
    params: {
      Batch: route.query.Batch,
      imgType: 1
    }
  }).then(res => {
    if (Array.isArray(res.data.Data)) {
      // 保存Id和Img
      reportImgs.value = res.data.Data.map(item => ({ Id: item.Id, Img: item.Img }))
    }
  })
}
function handleJYImgUpload(file) {
  const formData = new FormData()
  formData.append('formFiles', file.raw)
  axios.post('http://localhost:5266/api/FileUpload/UploadFiles', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    if (Array.isArray(res.data)) {
      const imgInfoList = res.data
        .filter(name => typeof name === 'string' && name.startsWith('http'))
        .map(url => ({
          Batch: route.query.Batch,
          ImgType: 1,
          Img: url
        }))
      Promise.all(imgInfoList.map(info => axios.post("http://localhost:5266/api/Img/CreateImg", info)))
        .then(() => {
          getYJImgs() // 上传后刷新
          ElMessage.success('上传成功')
        })
    } else {
      ElMessage.error('上传失败')
    }
  }).catch(() => {
    ElMessage.error('上传失败')
  })
}
function removeReportImg(idx) {
  const removedImg = reportImgs.value[idx]
  axios.get('http://localhost:5266/api/Img/DelImg', {
    params: {
      Id: removedImg.Id,
      Batch: route.query.Batch,
      ImgType: 1
    }
  }).then(res => {
    if (res.data.Code === 200) {
      reportImgs.value.splice(idx, 1)
      ElMessage.success('删除成功')
    } else {
      ElMessage.error('删除失败')
    }
  }).catch(() => {
    ElMessage.error('删除失败')
  })
}
// 养殖信息
const yzInfo = reactive({
  "Batch": "",
  "Variety": "",
  "Source": "",
  "FeedingDays": "",
  "BreedingBrand": "",
  "BreedingManager": "",
  "DateOfSlaughter": "",
})
const ShowBreed = () => {
  axios.get("http://localhost:5266/api/Breed/GetBreed", { params: { Batch: route.query.Batch } }).then(res => {
    Object.assign(yzInfo, res.data.Data)
    Object.assign(yzForm, res.data.Data)
  })
}
// 养殖信息弹窗相关
const showYzDialog = ref(false)
const yzForm = reactive({
  "Id": "",
  "Batch": route.query.Batch,
  "Variety": "",
  "Source": "",
  "FeedingDays": "",
  "BreedingBrand": "",
  "BreedingManager": "",
  "DateOfSlaughter": ""
})
const onYzSave = () => {
  if (yzForm.Id == "") {
    axios.post("http://localhost:5266/api/Breed/CreateBreed", yzForm).then(res => {
      if (res.data.Code == 200) {
        ElMessage.success(res.data.Message)
        ShowBreed()
        showYzDialog.value = false
      }
      else {
        ElMessage.warning(res.data.Message)
      }
    })
  }
  else {
    axios.post("http://localhost:5266/api/Breed/UpdBreed", yzForm).then(res => {
      if (res.data.Code == 200) {
        ElMessage.success(res.data.Message)
        ShowBreed()
        showYzDialog.value = false
      }
      else {
        ElMessage.warning(res.data.Message)
      }
    })
  }
}
function onYzDialogClose() {
  Object.assign(yzInfo, yzForm)
  showYzDialog.value = false
  // 关闭时重置为当前已保存内容
  Object.assign(yzForm, yzInfo)
}
const yzRules = {
  Variety: [
    { required: true, message: '请输入品种', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/, message: '只能输入中文或字母', trigger: 'blur' },
    { max: 30, message: '最多30位字符', trigger: 'blur' }
  ],
  Source: [
    { required: true, message: '请输入来源', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/, message: '只能输入中文或字母', trigger: 'blur' },
    { max: 30, message: '最多30位字符', trigger: 'blur' }
  ],
  FeedingDays: [
    { required: true, message: '请输入饲养天数', trigger: 'blur' },
    { pattern: /^\d+$/, message: '只能输入数字', trigger: 'blur' },
    { max: 5, message: '最多5位数字', trigger: 'blur' }
  ],
  BreedingBrand: [
    { required: true, message: '请输入饲料品牌', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/, message: '只能输入中文或字母', trigger: 'blur' },
    { max: 30, message: '最多30位字符', trigger: 'blur' }
  ],
  BreedingManager: [
    { required: true, message: '请输入负责人', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/, message: '只能输入中文或字母', trigger: 'blur' },
    { max: 30, message: '最多30位字符', trigger: 'blur' }
  ],
  DateOfSlaughter: [
    { required: true, message: '请选择出栏日期', trigger: 'change' }
  ]
}

// 保健信息表格数据
const healthList = ref([{
  FeedingDays: '',
  HealthCareMethod: '',
  HealthMethod: ''
}])
const ShowHealth = () => {
  axios.get("http://localhost:5266/api/Health/GetHealth", { params: { Batch: route.query.Batch } }).then(res => {
    healthList.value = res.data.Data
  })
}
//新增行
function addRow() {
  healthList.value.push({ FeedingDays: '', HealthCareMethod: '', HealthMethod: '', editing: true })
}
const editRow = (idx) => {
  healthList.value[idx].editing = true
}
function saveRow(idx) {
  const row = healthList.value[idx]
  // 构造要提交的数据对象
  const postData = {
    Id: row.Id,
    Batch: route.query.Batch, // 批次号
    FeedingDays: row.FeedingDays,
    HealthCareMethod: row.HealthCareMethod,
    HealthMethod: row.HealthMethod
  }
  if (row.Id == '') {
    axios.post('http://localhost:5266/api/Health/CreateHealth', postData)
      .then(res => {
        if (res.data.Code === 200) {
          ElMessage.success(res.data.Message)
          ShowHealth()
        } else {
          ElMessage.error(res.data.Message)
        }
      })
  }
  else {
    axios.post('http://localhost:5266/api/Health/UpdHealth', postData)
      .then(res => {
        if (res.data.Code === 200) {
          ElMessage.success(res.data.Message)
          ShowHealth()
        } else {
          ElMessage.error(res.data.Message)
        }
      })
  }
}
function cancelEdit(idx) { healthList.value[idx].editing = false }
const deleteRow = (idx) => {
  const row = healthList.value[idx]
  axios.get('http://localhost:5266/api/Health/DelHealth', { params: { Id: row.Id, Batch: row.Batch } })
    .then(res => {
      if (res.data.Code === 200) {
        ElMessage.success(res.data.Message)
        ShowHealth()
      } else {
        ElMessage.error(res.data.Message)
      }
    })
}

// 动检证图片
const animalCerts = ref([])
const getDJImgs = () => {
  axios.get('http://localhost:5266/api/Img/GetImg', {
    params: {
      Batch: route.query.Batch,
      imgType: 2
    }
  }).then(res => {
    if (Array.isArray(res.data.Data)) {
      animalCerts.value = res.data.Data.map(item => ({ Id: item.Id, Img: item.Img }))
    }
  })
}
function handleAnimalCertUpload(file) {
  const formData = new FormData()
  formData.append('formFiles', file.raw)
  axios.post('http://localhost:5266/api/FileUpload/UploadFiles', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    if (Array.isArray(res.data)) {
      const imgInfoList = res.data
        .filter(name => typeof name === 'string' && name.startsWith('http'))
        .map(url => ({
          Batch: route.query.Batch,
          ImgType: 2,
          Img: url
        }))
      Promise.all(imgInfoList.map(info => axios.post("http://localhost:5266/api/Img/CreateImg", info)))
        .then(() => {
          getDJImgs()
          ElMessage.success('上传成功')
        })
    } else {
      ElMessage.error('上传失败')
    }
  }).catch(() => {
    ElMessage.error('上传失败')
  })
}
function removeAnimalCert(idx) {
  const removedImg = animalCerts.value[idx]
  axios.get('http://localhost:5266/api/Img/DelImg', {
    params: {
      Id: removedImg.Id,
      Batch: route.query.Batch,
      ImgType: 2
    }
  }).then(res => {
    if (res.data.Code === 200) {
      animalCerts.value.splice(idx, 1)
      ElMessage.success('删除成功')
    } else {
      ElMessage.error('删除失败')
    }
  }).catch(() => {
    ElMessage.error('删除失败')
  })
}

// 养殖企业信息弹窗相关
const showYzCompanyDialog = ref(false)
const yzCompanyInfo = ref({
  "Farm": "",
  "Director": "",
  "IHNumber": ""
})
const ShowYZCompany = () => {
  axios.get("http://localhost:5266/api/Enterprise/GetYZEnterprise", { params: { Batch: route.query.Batch, EnterpriseId: informationid.value } }).then(res => {
    Object.assign(yzCompanyInfo.value, res.data.Data)
    Object.assign(yzCompanyForm.value, res.data.Data)
  })
}
const yzCompanyForm = ref({
  "Id": "",
  "Batch": "",
  "EnterpriseId": "",
  "Farm": "",
  "Director": "",
  "IHNumber": ""
})
const yzCompanyFormRef = ref({})
const onYzCompanySave = () => {
  // 强制补全
  yzCompanyForm.value.Batch = route.query.Batch
  yzCompanyForm.value.EnterpriseId = informationid.value

  if (!yzCompanyForm.value.Id) {
    axios.post("http://localhost:5266/api/Enterprise/CreateYZEnterprise", yzCompanyForm.value).then(res => {
      if (res.data.Code == 200) {
        ElMessage.success(res.data.Message)
        ShowYZCompany()
        showYzCompanyDialog.value = false
      } else {
        ElMessage.warning(res.data.Message)
      }
    })
  } else {
    axios.post("http://localhost:5266/api/Enterprise/UpdYZEnterprise", yzCompanyForm.value).then(res => {
      if (res.data.Code == 200) {
        ElMessage.success(res.data.Message)
        ShowYZCompany()
        showYzCompanyDialog.value = false
      } else {
        ElMessage.warning(res.data.Message)
      }
    })
  }
}
const yzCompanyRules = {
  Farm: [
    { required: true, message: '请输入养殖场', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/, message: '只能输入中文或字母', trigger: 'blur' },
    { max: 30, message: '最多30位字符', trigger: 'blur' }
  ],
  Director: [
    { required: true, message: '请输入负责人', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/, message: '只能输入中文或字母', trigger: 'blur' },
    { max: 30, message: '最多30位字符', trigger: 'blur' }
  ],
  IHNumber: [
    { required: true, message: '请输入存栏数量', trigger: 'blur' },
    { pattern: /^\d+$/, message: '只能输入数字', trigger: 'blur' },
    { max: 5, message: '最多5位数字', trigger: 'blur' }
  ]
}
function onYzCompanyDialogClose() {
  Object.assign(yzCompanyForm, yzCompanyInfo)
}
// 养殖企业照片
const companyImgs = ref([])
const getYZCompanyImgs = () => {
  axios.get('http://localhost:5266/api/Img/GetImg', {
    params: {
      Batch: route.query.Batch,
      imgType: 3
    }
  }).then(res => {
    if (Array.isArray(res.data.Data)) {
      companyImgs.value = res.data.Data.map(item => ({ Id: item.Id, Img: item.Img }))
    }
  })
}
function handleYZCompanyImgUpload(file) {
  const formData = new FormData()
  formData.append('formFiles', file.raw)
  axios.post('http://localhost:5266/api/FileUpload/UploadFiles', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    if (Array.isArray(res.data)) {
      const imgInfoList = res.data
        .filter(name => typeof name === 'string' && name.startsWith('http'))
        .map(url => ({
          Batch: route.query.Batch,
          ImgType: 3,
          Img: url
        }))
      Promise.all(imgInfoList.map(info => axios.post("http://localhost:5266/api/Img/CreateImg", info)))
        .then(() => {
          getYZCompanyImgs()
          ElMessage.success('上传成功')
        })
    } else {
      ElMessage.error('上传失败')
    }
  }).catch(() => {
    ElMessage.error('上传失败')
  })
}
function removeCompanyImg(idx) {
  const removedImg = companyImgs.value[idx]
  axios.get('http://localhost:5266/api/Img/DelImg', {
    params: {
      Id: removedImg.Id,
      Batch: route.query.Batch,
      ImgType: 3
    }
  }).then(res => {
    if (res.data.Code === 200) {
      companyImgs.value.splice(idx, 1)
      ElMessage.success('删除成功')
    } else {
      ElMessage.error('删除失败')
    }
  }).catch(() => {
    ElMessage.error('删除失败')
  })
}
// 屠宰信息弹窗相关
const showTzDialog = ref(false)
const tzInfo = reactive({
  Batch: '',
  Averageweight: '',
  ArrivalTime: '',
  SlaughterTime: ''
})
const ShowTZInformation = () => {
  axios.get("http://localhost:5266/api/Slaughter/GetSlaughter", { params: { Batch: route.query.Batch } }).then(res => {
    Object.assign(tzInfo, res.data.Data)
    Object.assign(tzForm, res.data.Data)
  })
}
const tzForm = reactive({
  Id: '',
  Batch: route.query.Batch,
  Averageweight: '',
  ArrivalTime: '',
  SlaughterTime: ''
})
const tzFormRef = ref()
const tzRules = {
  Batch: [
    { required: true, message: '请输入批次', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/, message: '只能输入中文、字母或数字', trigger: 'blur' },
    { max: 30, message: '最多30位字符', trigger: 'blur' }
  ],
  Averageweight: [
    { required: true, message: '请输入到厂均重', trigger: 'blur' },
    { pattern: /^\d+$/, message: '只能输入数字', trigger: 'blur' },
    { max: 5, message: '最多5位数字', trigger: 'blur' }
  ],
  ArrivalTime: [
    { required: true, message: '请选择到厂时间', trigger: 'change' }
  ],
  SlaughterTime: [
    { required: true, message: '请选择屠宰时间', trigger: 'change' }
  ]
}
const onTzSave = () => {
  tzForm.ArrivalTime = moment(tzForm.ArrivalTime).format("YYYY-MM-DDTHH:mm:ss")
  tzForm.SlaughterTime = moment(tzForm.SlaughterTime).format("YYYY-MM-DDTHH:mm:ss")
  if (tzForm.Id == "") {
    axios.post("http://localhost:5266/api/Slaughter/CreateSlaughter", tzForm).then(res => {
      if (res.data.Code == 200) {
        ElMessage.success(res.data.Message)
        ShowTZInformation()
        showTzDialog.value = false
      } else {
        ElMessage.warning(res.data.Message)
      }
    })
  }
  else {
    axios.post("http://localhost:5266/api/Slaughter/UpdSlaughter", tzForm).then(res => {
      if (res.data.Code == 200) {
        ElMessage.success(res.data.Message)
        ShowTZInformation()
        showTzDialog.value = false
      } else {
        ElMessage.warning(res.data.Message)
      }
    })
  }
}
function onTzDialogClose() {
  Object.assign(tzForm, tzInfo)
  tzForm.Batch = route.query.Batch
}

//相关资质
const slaughterCerts = ref([])
const getZZImgs = () => {
  axios.get('http://localhost:5266/api/Img/GetImg', {
    params: {
      Batch: route.query.Batch,
      imgType: 4
    }
  }).then(res => {
    if (Array.isArray(res.data.Data)) {
      slaughterCerts.value = res.data.Data.map(item => ({ Id: item.Id, Img: item.Img }))
    }
  })
}
function handleSlaughterCertUpload(file) {
  const formData = new FormData()
  formData.append('formFiles', file.raw)
  axios.post('http://localhost:5266/api/FileUpload/UploadFiles', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    if (Array.isArray(res.data)) {
      const imgInfoList = res.data
        .filter(name => typeof name === 'string' && name.startsWith('http'))
        .map(url => ({
          Batch: route.query.Batch,
          ImgType: 4,
          Img: url
        }))
      Promise.all(imgInfoList.map(info => axios.post("http://localhost:5266/api/Img/CreateImg", info)))
        .then(() => {
          getZZImgs()
          ElMessage.success('上传成功')
        })
    } else {
      ElMessage.error('上传失败')
    }
  }).catch(() => {
    ElMessage.error('上传失败')
  })
}
function removeSlaughterCert(idx) {
  const removedImg = slaughterCerts.value[idx]
  axios.get('http://localhost:5266/api/Img/DelImg', {
    params: {
      Id: removedImg.Id,
      Batch: route.query.Batch,
      ImgType: 4
    }
  }).then(res => {
    if (res.data.Code === 200) {
      slaughterCerts.value.splice(idx, 1)
      ElMessage.success('删除成功')
    } else {
      ElMessage.error('删除失败')
    }
  }).catch(() => {
    ElMessage.error('删除失败')
  })
}

// 屠宰企业信息弹窗相关
const showTzCompanyDialog = ref(false)
const tzCompanyInfo = reactive({
  "Batch": "",
  "EnterpriseId": "",
  "CompanyName": "",
  "Province": "",
  "City": "",
  "Xian": "",
  "FoundTime": "",
  "CompanyProfile": ""
})
const ShowTZCompany = () => {
  axios.get("http://localhost:5266/api/Enterprise/GetTZEnterprise", { params: { Batch: route.query.Batch, EnterpriseId: informationid.value } }).then(res => {
    Object.assign(tzCompanyInfo, res.data.Data)
    Object.assign(tzCompanyForm, res.data.Data)
    fillAddressFromBackend(tzCompanyForm)
  })
}
const tzCompanyForm = reactive({
  "Id": "",
  "Batch": "",
  "EnterpriseId": "",
  "CompanyName": "",
  "Province": "",
  "City": "",
  "Xian": "",
  "FoundTime": "",
  "CompanyProfile": ""
})

const tzCompanyFormRef = ref()
const tzCompanyRules = {
  CompanyName: [
    { required: true, message: '请输入公司名称', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/, message: '只能输入中文或字母', trigger: 'blur' },
    { max: 30, message: '最多30位字符', trigger: 'blur' }
  ],
  FoundTime: [
    { required: true, message: '请选择成立时间', trigger: 'change' }
  ],
  CompanyProfile: [
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]*$/, message: '只能输入中文或字母', trigger: 'blur' },
    { max: 500, message: '最多500位字符', trigger: 'blur' }
  ]
}
//省市县
const provinces = ref(regionData.map(p => ({ label: p.label, value: p.value, children: p.children })))
const cities = ref([])
const districts = ref([])
const selectedProvince = ref('')
const selectedCity = ref('')
const selectedDistrict = ref('')

watch(selectedProvince, (val) => {
  const province = provinces.value.find(p => p.value === val)
  cities.value = province?.children || []
  selectedCity.value = ''
  districts.value = []
  selectedDistrict.value = ''
  // 省名赋值
  tzCompanyForm.Province = getLabelByCode(val, provinces.value)

})
watch(selectedCity, (val) => {
  const city = cities.value.find(c => c.value === val)
  districts.value = city ? city.children : []
  // 市名赋值
  tzCompanyForm.City = getLabelByCode(val, cities.value)
})
watch(selectedDistrict, (val) => {
  // 区县名赋值
  tzCompanyForm.Xian = getLabelByCode(val, districts.value)
})
function getLabelByCode(code, list) {
  const item = list.find((i) => i.value === code)
  return item ? item.label : ''
}
function getCodeByLabel(label, list) {
  const item = list.find(i => i.label === label)
  return item ? item.value : ''
}
function fillAddressFromBackend(form) {
  // 反填省
  selectedProvince.value = getCodeByLabel(form.Province, provinces.value)
  let province = provinces.value.find(p => p.value === selectedProvince.value)
  cities.value = province?.children || []

  // 等 cities 响应式更新后再反填市
  nextTick(() => {
    selectedCity.value = getCodeByLabel(form.City, cities.value)
    let city = cities.value.find(c => c.value === selectedCity.value)
    districts.value = city?.children || []

    // 再等 districts 响应式更新后反填区县
    nextTick(() => {
      selectedDistrict.value = getCodeByLabel(form.Xian, districts.value)
    })
  })
}

const onTzCompanySave = () => {
  tzCompanyForm.Batch = route.query.Batch
  tzCompanyForm.EnterpriseId = informationid.value
  if (tzCompanyForm.Id == null) {
    axios.post("http://localhost:5266/api/Enterprise/CreateTZEnterprise", tzCompanyForm).then(res => {
      if (res.data.Code == 200) {
        ElMessage.success(res.data.Message)
        ShowTZCompany()
        showTzCompanyDialog.value = false
      } else {
        ElMessage.warning(res.data.Message)
      }
    })
  }
  else {
    axios.post("http://localhost:5266/api/Enterprise/UpdTZEnterprise", tzCompanyForm).then(res => {
      if (res.data.Code == 200) {
        ElMessage.success(res.data.Message)
        ShowTZCompany()
        showTzCompanyDialog.value = false
      } else {
        ElMessage.warning(res.data.Message)
      }
    })
  }
}
function onTzCompanyDialogClose() {
  Object.assign(tzCompanyForm, tzCompanyInfo)
}
//屠宰企业照片
const reportTZImgs = ref([])
const getTZImgs = () => {
  axios.get('http://localhost:5266/api/Img/GetImg', {
    params: {
      Batch: route.query.Batch,
      imgType: 5
    }
  }).then(res => {
    if (Array.isArray(res.data.Data)) {
      reportTZImgs.value = res.data.Data.map(item => ({ Id: item.Id, Img: item.Img }))
    }
  })
}
function handleTZImgUpload(file) {
  const formData = new FormData()
  formData.append('formFiles', file.raw)
  axios.post('http://localhost:5266/api/FileUpload/UploadFiles', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    if (Array.isArray(res.data)) {
      const imgInfoList = res.data
        .filter(name => typeof name === 'string' && name.startsWith('http'))
        .map(url => ({
          Batch: route.query.Batch,
          ImgType: 5,
          Img: url
        }))
      Promise.all(imgInfoList.map(info => axios.post("http://localhost:5266/api/Img/CreateImg", info)))
        .then(() => {
          getTZImgs()
          ElMessage.success('上传成功')
        })
    } else {
      ElMessage.error('上传失败')
    }
  }).catch(() => {
    ElMessage.error('上传失败')
  })
}
function removeTZImg(idx) {
  const removedImg = reportTZImgs.value[idx]
  axios.get('http://localhost:5266/api/Img/DelImg', {
    params: {
      Id: removedImg.Id,
      Batch: route.query.Batch,
      ImgType: 5
    }
  }).then(res => {
    if (res.data.Code === 200) {
      reportTZImgs.value.splice(idx, 1)
      ElMessage.success('删除成功')
    } else {
      ElMessage.error('删除失败')
    }
  }).catch(() => {
    ElMessage.error('删除失败')
  })
}
// 深加工tab企业信息弹窗相关
const showSgjDialog = ref(false)
const sjgInfo = reactive({
  "Batch": "",
  "Teams": "",
  "Director": ""
})
const sjgForm = reactive({
  "Id": "",
  "Batch": "",
  "Teams": "",
  "Director": ""
})
const ShowSJG = () => {
  axios.get("http://localhost:5266/api/Deep/GetDeep", { params: { Batch: route.query.Batch } }).then(res => {
    Object.assign(sjgInfo, res.data.Data)
    Object.assign(sjgForm, res.data.Data)
    console.log(sjgForm);
  })
}
const onSgjSave = () => {
  sjgForm.Batch = route.query.Batch
  sjgFormRef.value.validate((valid) => {
    if (!valid) return; // 校验不通过，直接返回，不保存
    if (sjgForm.Id == null) {
      axios.post("http://localhost:5266/api/Deep/CreateDeep", sjgForm).then(res => {
        if (res.data.Code == 200) {
          ElMessage.success(res.data.Message)
          ShowSJG()
          showSgjDialog.value = false
        } else {
          ElMessage.warning(res.data.Message)
        }
      })
    } else {
      axios.post("http://localhost:5266/api/Deep/UpdDeep", sjgForm).then(res => {
        if (res.data.Code == 200) {
          ElMessage.success(res.data.Message)
          ShowSJG()
          showSgjDialog.value = false
        } else {
          ElMessage.warning(res.data.Message)
        }
      })
    }
  })
}
const sjgFormRef = ref()
const sjgRules = {
  Teams: [
    { required: true, message: '请输入班组', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/, message: '只能输入中文或字母', trigger: 'blur' },
    { max: 30, message: '最多30位字符', trigger: 'blur' }
  ],
  Director: [
    { required: true, message: '请输入负责人', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/, message: '只能输入中文或字母', trigger: 'blur' },
    { max: 30, message: '最多30位字符', trigger: 'blur' }
  ]
}
function openSgjDialog() {
  showSgjDialog.value = true
}
function onSgjDialogClose() {
  showSgjDialog.value = false
}

// 深加工tab图片相关
const sjgFoodSafeImgs = ref([])
const getAQImgs = () => {
  axios.get('http://localhost:5266/api/Img/GetImg', {
    params: {
      Batch: route.query.Batch,
      imgType: 6
    }
  }).then(res => {
    if (Array.isArray(res.data.Data)) {
      sjgFoodSafeImgs.value = res.data.Data.map(item => ({ Id: item.Id, Img: item.Img }))
    }
  })
}
function handleSjgFoodSafeImgUpload(file) {
  const formData = new FormData()
  formData.append('formFiles', file.raw)
  axios.post('http://localhost:5266/api/FileUpload/UploadFiles', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    if (Array.isArray(res.data)) {
      const imgInfoList = res.data
        .filter(name => typeof name === 'string' && name.startsWith('http'))
        .map(url => ({
          Batch: route.query.Batch,
          ImgType: 6,
          Img: url
        }))
      Promise.all(imgInfoList.map(info => axios.post("http://localhost:5266/api/Img/CreateImg", info)))
        .then(() => {
          getAQImgs()
          ElMessage.success('上传成功')
        })
    } else {
      ElMessage.error('上传失败')
    }
  }).catch(() => {
    ElMessage.error('上传失败')
  })
}
function removeSjgFoodSafeImg(idx) {
  const removedImg = sjgFoodSafeImgs.value[idx]
  axios.get('http://localhost:5266/api/Img/DelImg', {
    params: {
      Id: removedImg.Id,
      Batch: route.query.Batch,
      ImgType: 6
    }
  }).then(res => {
    if (res.data.Code === 200) {
      sjgFoodSafeImgs.value.splice(idx, 1)
      ElMessage.success('删除成功')
    } else {
      ElMessage.error('删除失败')
    }
  }).catch(() => {
    ElMessage.error('删除失败')
  })
}

// 原料相关材料图片
const sjgRawImgs = ref([])
const getRawImgs = () => {
  axios.get('http://localhost:5266/api/Img/GetImg', {
    params: {
      Batch: route.query.Batch,
      imgType: 7
    }
  }).then(res => {
    if (Array.isArray(res.data.Data)) {
      sjgRawImgs.value = res.data.Data.map(item => ({ Id: item.Id, Img: item.Img }))
    }
  })
}
function handleSjgRawImgUpload(file) {
  const formData = new FormData()
  formData.append('formFiles', file.raw)
  axios.post('http://localhost:5266/api/FileUpload/UploadFiles', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    if (Array.isArray(res.data)) {
      const imgInfoList = res.data
        .filter(name => typeof name === 'string' && name.startsWith('http'))
        .map(url => ({
          Batch: route.query.Batch,
          ImgType: 7,
          Img: url
        }))
      Promise.all(imgInfoList.map(info => axios.post("http://localhost:5266/api/Img/CreateImg", info)))
        .then(() => {
          getRawImgs()
          ElMessage.success('上传成功')
        })
    } else {
      ElMessage.error('上传失败')
    }
  }).catch(() => {
    ElMessage.error('上传失败')
  })
}
function removeSjgRawImg(idx) {
  const removedImg = sjgRawImgs.value[idx]
  axios.get('http://localhost:5266/api/Img/DelImg', {
    params: {
      Id: removedImg.Id,
      Batch: route.query.Batch,
      ImgType: 7
    }
  }).then(res => {
    if (res.data.Code === 200) {
      sjgRawImgs.value.splice(idx, 1)
      ElMessage.success('删除成功')
    } else {
      ElMessage.error('删除失败')
    }
  }).catch(() => {
    ElMessage.error('删除失败')
  })
}

// 辅料相关材料图片
const sjgAssistImgs = ref([])
const getAssistImgs = () => {
  axios.get('http://localhost:5266/api/Img/GetImg', {
    params: {
      Batch: route.query.Batch,
      imgType: 8
    }
  }).then(res => {
    if (Array.isArray(res.data.Data)) {
      sjgAssistImgs.value = res.data.Data.map(item => ({ Id: item.Id, Img: item.Img }))
    }
  })
}
function handleSjgAssistImgUpload(file) {
  const formData = new FormData()
  formData.append('formFiles', file.raw)
  axios.post('http://localhost:5266/api/FileUpload/UploadFiles', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    if (Array.isArray(res.data)) {
      const imgInfoList = res.data
        .filter(name => typeof name === 'string' && name.startsWith('http'))
        .map(url => ({
          Batch: route.query.Batch,
          ImgType: 8,
          Img: url
        }))
      Promise.all(imgInfoList.map(info => axios.post("http://localhost:5266/api/Img/CreateImg", info)))
        .then(() => {
          getAssistImgs()
          ElMessage.success('上传成功')
        })
    } else {
      ElMessage.error('上传失败')
    }
  }).catch(() => {
    ElMessage.error('上传失败')
  })
}
function removeSjgAssistImg(idx) {
  const removedImg = sjgAssistImgs.value[idx]
  axios.get('http://localhost:5266/api/Img/DelImg', {
    params: {
      Id: removedImg.Id,
      Batch: route.query.Batch,
      ImgType: 8
    }
  }).then(res => {
    if (res.data.Code === 200) {
      sjgAssistImgs.value.splice(idx, 1)
      ElMessage.success('删除成功')
    } else {
      ElMessage.error('删除失败')
    }
  }).catch(() => {
    ElMessage.error('删除失败')
  })
}

// 添加剂相关材料图片
const sjgAddImgs = ref([])
const getAddImgs = () => {
  axios.get('http://localhost:5266/api/Img/GetImg', {
    params: {
      Batch: route.query.Batch,
      imgType: 9
    }
  }).then(res => {
    if (Array.isArray(res.data.Data)) {
      sjgAddImgs.value = res.data.Data.map(item => ({ Id: item.Id, Img: item.Img }))
    }
  })
}
function handleSjgAddImgUpload(file) {
  const formData = new FormData()
  formData.append('formFiles', file.raw)
  axios.post('http://localhost:5266/api/FileUpload/UploadFiles', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    if (Array.isArray(res.data)) {
      const imgInfoList = res.data
        .filter(name => typeof name === 'string' && name.startsWith('http'))
        .map(url => ({
          Batch: route.query.Batch,
          ImgType: 9,
          Img: url
        }))
      Promise.all(imgInfoList.map(info => axios.post("http://localhost:5266/api/Img/CreateImg", info)))
        .then(() => {
          getAddImgs()
          ElMessage.success('上传成功')
        })
    } else {
      ElMessage.error('上传失败')
    }
  }).catch(() => {
    ElMessage.error('上传失败')
  })
}
function removeSjgAddImg(idx) {
  const removedImg = sjgAddImgs.value[idx]
  axios.get('http://localhost:5266/api/Img/DelImg', {
    params: {
      Id: removedImg.Id,
      Batch: route.query.Batch,
      ImgType: 9
    }
  }).then(res => {
    if (res.data.Code === 200) {
      sjgAddImgs.value.splice(idx, 1)
      ElMessage.success('删除成功')
    } else {
      ElMessage.error('删除失败')
    }
  }).catch(() => {
    ElMessage.error('删除失败')
  })
}

// 包材相关材料图片
const sjgBCAddImgs = ref([])
const getAddBCImgs = () => {
  axios.get('http://localhost:5266/api/Img/GetImg', {
    params: {
      Batch: route.query.Batch,
      imgType: 11
    }
  }).then(res => {
    if (Array.isArray(res.data.Data)) {
      sjgBCAddImgs.value = res.data.Data.map(item => ({ Id: item.Id, Img: item.Img }))
    }
  })
}
function handleSjgBCAddImgUpload(file) {
  const formData = new FormData()
  formData.append('formFiles', file.raw)
  axios.post('http://localhost:5266/api/FileUpload/UploadFiles', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    if (Array.isArray(res.data)) {
      const imgInfoList = res.data
        .filter(name => typeof name === 'string' && name.startsWith('http'))
        .map(url => ({
          Batch: route.query.Batch,
          ImgType: 11,
          Img: url
        }))
      Promise.all(imgInfoList.map(info => axios.post("http://localhost:5266/api/Img/CreateImg", info)))
        .then(() => {
          getAddBCImgs()
          ElMessage.success('上传成功')
        })
    } else {
      ElMessage.error('上传失败')
    }
  }).catch(() => {
    ElMessage.error('上传失败')
  })
}
function removeSjgBCAddImg(idx) {
  const removedImg = sjgBCAddImgs.value[idx]
  axios.get('http://localhost:5266/api/Img/DelImg', {
    params: {
      Id: removedImg.Id,
      Batch: route.query.Batch,
      ImgType: 11
    }
  }).then(res => {
    if (res.data.Code === 200) {
      sjgBCAddImgs.value.splice(idx, 1)
      ElMessage.success('删除成功')
    } else {
      ElMessage.error('删除失败')
    }
  }).catch(() => {
    ElMessage.error('删除失败')
  })
}


// 深加工企业照片
const sjgCompanyImgs = ref([])
const getSJGCompanyImgs = () => {
  axios.get('http://localhost:5266/api/Img/GetImg', {
    params: {
      Batch: route.query.Batch,
      imgType: 10
    }
  }).then(res => {
    if (Array.isArray(res.data.Data)) {
      sjgCompanyImgs.value = res.data.Data.map(item => ({ Id: item.Id, Img: item.Img }))
    }
  })
}
function handleSjgCompanyImgUpload(file) {
  const formData = new FormData()
  formData.append('formFiles', file.raw)
  axios.post('http://localhost:5266/api/FileUpload/UploadFiles', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    if (Array.isArray(res.data)) {
      const imgInfoList = res.data
        .filter(name => typeof name === 'string' && name.startsWith('http'))
        .map(url => ({
          Batch: route.query.Batch,
          ImgType: 10,
          Img: url
        }))
      Promise.all(imgInfoList.map(info => axios.post("http://localhost:5266/api/Img/CreateImg", info)))
        .then(() => {
          getSJGCompanyImgs()
          ElMessage.success('上传成功')
        })
    } else {
      ElMessage.error('上传失败')
    }
  }).catch(() => {
    ElMessage.error('上传失败')
  })
}
function removeSjgCompanyImg(idx) {
  const removedImg = sjgCompanyImgs.value[idx]
  axios.get('http://localhost:5266/api/Img/DelImg', {
    params: {
      Id: removedImg.Id,
      Batch: route.query.Batch,
      ImgType: 10
    }
  }).then(res => {
    if (res.data.Code === 200) {
      sjgCompanyImgs.value.splice(idx, 1)
      ElMessage.success('删除成功')
    } else {
      ElMessage.error('删除失败')
    }
  }).catch(() => {
    ElMessage.error('删除失败')
  })
}



// 深加工tab企业信息弹窗相关
const sjgQyInfo = reactive({
  Batch:'',
  EnterpriseId:'',
  CompanyName: '',
  PNumber: ''
})
const ShowSJGCompany=()=>{
  axios.get("http://localhost:5266/api/Enterprise/GetSJGEnterprise",{params:{Batch:route.query.Batch,EnterpriseId:informationid.value}}).then(res=>{
    Object.assign(sjgQyInfo,res.data.Data)
    Object.assign(sjgQyForm,res.data.Data)
     console.log(sjgQyInfo);
     
  })
}
const sjgQyForm = reactive({
  Id:"",
  Batch:'',
  EnterpriseId:'',
  CompanyName: '',
  PNumber: ''
})
const onSgjQySave=()=>{
  sjgQyForm.Batch = route.query.Batch
  sjgQyForm.EnterpriseId = informationid.value
  if(sjgQyForm.Id==null){
      axios.post("http://localhost:5266/api/Enterprise/CreateSJGEnterprise", sjgQyForm).then(res => {
        if (res.data.Code == 200) {
          ElMessage.success(res.data.Message)
          ShowSJGCompany()
          showSgjQyDialog.value = false
        } else {
          ElMessage.warning(res.data.Message)
        }
      })
  }
  else{
      axios.post("http://localhost:5266/api/Enterprise/UpdSJGEnterprise", sjgQyForm).then(res => {
        if (res.data.Code == 200) {
          ElMessage.success(res.data.Message)
          ShowSJGCompany()
          showSgjQyDialog.value = false
        } else {
          ElMessage.warning(res.data.Message)
        }
      })
  }
}
const sjgQyFormRef = ref()
const showSgjQyDialog = ref(false)
const sjgQyRules = {
  CompanyName: [
    { required: true, message: '请输入公司名称', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/, message: '只能输入中文或字母', trigger: 'blur' },
    { max: 30, message: '最多30位字符', trigger: 'blur' }
  ],
  License: [
    { required: true, message: '请输入生产许可证号', trigger: 'blur' },
    { pattern: /^[A-Za-z0-9]+$/, message: '只能输入数字、字母', trigger: 'blur' },
    { max: 30, message: '最多30位字符', trigger: 'blur' }
  ]
}
function openSgjQyDialog() {
  Object.assign(sjgQyForm, sjgQyInfo)
  showSgjQyDialog.value = true
}

function onSgjQyDialogClose() {
  showSgjQyDialog.value = false
}

// 供应商信息弹窗相关
const rawSupplierInfo = reactive({ BatchNo: route.query.Batch })
const rawSupplierForm = reactive({ BatchNo: route.query.Batch })
const rawSupplierFormRef = ref()
const showRawSupplierDialog = ref(false)
const assistSupplierInfo = reactive({ BatchNo: route.query.Batch })
const assistSupplierForm = reactive({ BatchNo: route.query.Batch })
const assistSupplierFormRef = ref()
const showAssistSupplierDialog = ref(false)
const addSupplierInfo = reactive({ BatchNo: route.query.Batch })
const addSupplierForm = reactive({ BatchNo: route.query.Batch })
const addSupplierFormRef = ref()
const showAddSupplierDialog = ref(false)
const supplierRules = {
  BatchNo: [
    { required: true, message: '请输入生产批次', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/, message: '只能输入中文、字母或数字', trigger: 'blur' },
    { max: 30, message: '最多30位字符', trigger: 'blur' }
  ]
}
function openRawSupplierDialog() {
  Object.assign(rawSupplierForm, rawSupplierInfo)
  showRawSupplierDialog.value = true
}
function onRawSupplierSave() {
  rawSupplierFormRef.value.validate((valid) => {
    if (!valid) return
    Object.assign(rawSupplierInfo, rawSupplierForm)
    showRawSupplierDialog.value = false
    setTimeout(() => {
      ElMessage.success('保存成功')
    }, 2000)
  })
}
function onRawSupplierDialogClose() {
  showRawSupplierDialog.value = false
}
function openAssistSupplierDialog() {
  Object.assign(assistSupplierForm, assistSupplierInfo)
  showAssistSupplierDialog.value = true
}
function onAssistSupplierSave() {
  assistSupplierFormRef.value.validate((valid) => {
    if (!valid) return
    Object.assign(assistSupplierInfo, assistSupplierForm)
    showAssistSupplierDialog.value = false
    setTimeout(() => {
      ElMessage.success('保存成功')
    }, 2000)
  })
}
function onAssistSupplierDialogClose() {
  showAssistSupplierDialog.value = false
}
function openAddSupplierDialog() {
  Object.assign(addSupplierForm, addSupplierInfo)
  showAddSupplierDialog.value = true
}
function onAddSupplierSave() {
  addSupplierFormRef.value.validate((valid) => {
    if (!valid) return
    Object.assign(addSupplierInfo, addSupplierForm)
    showAddSupplierDialog.value = false
    setTimeout(() => {
      ElMessage.success('保存成功')
    }, 2000)
  })
}
function onAddSupplierDialogClose() {
  showAddSupplierDialog.value = false
}

// 统计养殖信息完成度
const yzCompletedCount = computed(() => {
  let count = 0
  // 1. 基本信息
  if (yzInfo.Variety && yzInfo.Source && yzInfo.FeedingDays && yzInfo.BreedingBrand && yzInfo.BreedingManager && yzInfo.DateOfSlaughter) count++
  // 2. 保健信息
  if (healthList.value && healthList.value.length > 0 && healthList.value.every(item => item.FeedingDays && item.HealthCareMethod && item.HealthMethod)) count++
  // 3. 动检证
  if (animalCerts.value && animalCerts.value.length > 0) count++
  // 4. 企业信息
  if (yzCompanyInfo.value.Farm && yzCompanyInfo.value.Director && yzCompanyInfo.value.IHNumber) count++
  // 5. 企业照片
  if (companyImgs.value && companyImgs.value.length > 0) count++
  return count
})
// 统计屠宰信息完成度
const tzCompletedCount = computed(() => {
  let count = 0
  // 1. 屠宰信息
  if (tzInfo.Batch && tzInfo.Averageweight && tzInfo.ArrivalTime && tzInfo.SlaughterTime) count++
  // 2. 相关资质
  if (slaughterCerts.value && slaughterCerts.value.length > 0) count++
  // 3. 企业信息
  if (tzCompanyInfo.CompanyName && tzCompanyInfo.FoundTime && tzCompanyInfo.Province && tzCompanyInfo.City && tzCompanyInfo.Xian) count++
  // 4. 企业照片
  if (reportTZImgs.value && reportTZImgs.value.length > 0) count++
  return count
})
// 统计深加工信息完成度
const sjgCompletedCount = computed(() => {
  let count = 0
  // 1. 深加工信息
  if (sjgInfo.Teams && sjgInfo.Director) count++
  // 2. 食品安全信息
  if (sjgFoodSafeImgs.value && sjgFoodSafeImgs.value.length > 0) count++
  // 3. 供应商信息（原料/辅料/添加剂任一有内容即可）
  if (
    (sjgRawImgs.value && sjgRawImgs.value.length > 0) ||
    (sjgAssistImgs.value && sjgAssistImgs.value.length > 0) ||
    (sjgAddImgs.value && sjgAddImgs.value.length > 0)
  ) count++
  // 4. 企业信息
  if (sjgQyInfo.CompanyName && sjgQyInfo.PNumber) count++
  // 5. 企业照片
  if (sjgCompanyImgs.value && sjgCompanyImgs.value.length > 0) count++
  return count
})

</script>

<style scoped>
.product-top {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  margin-bottom: 32px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.06);
  padding: 32px 40px 32px 32px;
}

.product-img-wrap {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-img {
  width: 180px;
  height: 180px;
  border-radius: 20px;
  object-fit: cover;
  background: #f5f5f5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

.product-info-wrap {
  flex: 1;
  min-width: 0;
}

.product-info-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.product-title {
  font-size: 2.2rem;
  font-weight: bold;
  margin: 0;
  color: #222;
  letter-spacing: 1px;
}

.product-btns {
  display: flex;
  gap: 18px;
}

.beauty-btn {
  border-radius: 8px !important;
  font-size: 15px !important;
  padding: 7px 22px !important;
  background: #f8faff !important;
  border: 1px solid #e4e7ed !important;
  color: #222 !important;
  transition: all 0.2s;
}

.beauty-btn:hover {
  background: #ecf5ff !important;
  color: #409eff !important;
  border-color: #b3d8ff !important;
}

.product-info-row {
  display: flex;
  gap: 64px;
  margin: 10px 0 0 0;
  font-size: 17px;
  color: #444;
}

.info-value {
  color: #222;
  font-weight: 500;
}

.product-section-title {
  font-weight: bold;
  margin: 22px 0 10px 0;
  font-size: 18px;
  color: #222;
}

.img-list {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.img-item {
  position: relative;
  width: 100px;
  height: 100px;
  background: #fafbfc;
  border-radius: 10px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-item img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.img-del {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #f56c6c;
  color: #fff;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 2px solid #fff;
}

.img-upload-btn {
  width: 100px;
  height: 100px;
  border: 2px dashed #d9d9d9;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #bbb;
  cursor: pointer;
  background: #fafbfc;
  transition: border-color 0.2s, background 0.2s;
}

.img-upload-btn:hover {
  border-color: #409eff;
  background: #f4faff;
  color: #409eff;
}

/* 养殖信息卡片美化 */
.mb24 {
  margin-bottom: 24px;
}

.beauty-card {
  border-radius: 16px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  background: #fff;
  padding: 24px 32px 18px 32px;
}

.yz-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

.yz-title {
  color: #409eff;
  font-weight: bold;
  font-size: 17px;
  letter-spacing: 1px;
}

.yz-set-btn {
  margin-left: 0;
  border-radius: 7px !important;
  font-size: 14px !important;
  padding: 5px 18px !important;
}

.beauty-divider {
  margin: 8px 0 18px 0 !important;
  border-top: 1.5px solid #e4e7ed !important;
}

.yz-info-table {
  margin-top: 0;
}

.yz-info-row {
  display: flex;
  gap: 80px;
  margin-bottom: 10px;
  font-size: 15.5px;
  color: #444;
}

.xq-main {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.xq-left {
  flex: 1;
}

.section-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

.section-title-blue {
  color: #409eff;
  font-weight: bold;
  font-size: 17px;
  letter-spacing: 1px;
  margin-bottom: 0;
}

.beauty-table {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  font-size: 15px;
}

.beauty-table .el-table__header th {
  background: #f6f8fa;
  color: #222;
  font-weight: bold;
  font-size: 15.5px;
  border-bottom: 2px solid #ebeef5;
  padding: 10px 0;
}

.beauty-table .el-table__row td {
  background: #fff;
  color: #444;
  font-size: 15px;
  padding: 8px 0;
}

.beauty-input {
  width: 100%;
  min-width: 60px;
  max-width: 120px;
  margin-right: 8px;
}

.beauty-link {
  color: #409eff !important;
  font-weight: 500;
  margin-right: 8px;
  transition: color 0.2s;
}

.beauty-link:hover {
  color: #1867c0 !important;
  text-decoration: underline;
}

.mt16 {
  margin-top: 16px;
}

.big-img-item {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
}

.big-img-item img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.big-upload-btn {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  font-size: 40px;
}

.company-info-table {
  margin-top: 8px;
}

.company-info-row {
  display: flex;
  gap: 80px;
  margin-bottom: 10px;
  font-size: 15.5px;
  color: #444;
}

.img-label {
  text-align: center;
  font-size: 14px;
  color: #409eff;
  margin-top: 4px;
  font-weight: 500;
}

/* Tab栏整体 */
.beauty-tabs {
  margin-bottom: 18px;
  background: #fff;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
  padding-left: 18px;
  border-bottom: 2px solid #f0f2f5;
}

/* Tab项 */
.beauty-tabs .el-tabs__item {
  font-size: 17px;
  font-weight: 500;
  color: #888;
  padding: 0 32px !important;
  height: 48px;
  line-height: 48px;
  transition: color 0.2s, background 0.2s;
  border-radius: 10px 10px 0 0;
  margin-right: 8px;
}

/* 选中Tab */
.beauty-tabs .el-tabs__item.is-active {
  color: #409eff !important;
  background: #f4faff !important;
  box-shadow: 0 2px 8px 0 rgba(64,158,255,0.08);
  font-weight: bold;
}

/* 下划线更细更短 */
.beauty-tabs .el-tabs__active-bar {
  height: 3px !important;
  border-radius: 2px;
  width: 36px !important;
  left: 24px !important;
  background: #409eff !important;
}

/* Tab hover */
.beauty-tabs .el-tabs__item:hover {
  color: #409eff;
  background: #f0f7ff;
}

/* 卡片优化 */
.beauty-card {
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.06);
  background: #fff;
  padding: 32px 40px 24px 40px;
  margin-bottom: 28px;
  border: none;
}

.section-title-blue {
  color: #409eff;
  font-weight: bold;
  font-size: 19px;
  letter-spacing: 1px;
  margin-bottom: 0;
}

.yz-info-row, .company-info-row {
  gap: 60px;
  margin-bottom: 12px;
  font-size: 16px;
  color: #444;
}

.img-list {
  gap: 18px;
  margin-top: 12px;
}

.img-item, .big-img-item {
  border-radius: 12px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.08);
  background: #f8faff;
  border: 1.5px solid #e4e7ed;
  transition: box-shadow 0.2s;
}
.img-item:hover, .big-img-item:hover {
  box-shadow: 0 4px 16px 0 rgba(64,158,255,0.10);
  border-color: #b3d8ff;
}

/* 按钮优化 */
.beauty-btn {
  border-radius: 10px !important;
  font-size: 15px !important;
  padding: 8px 26px !important;
  background: #f8faff !important;
  border: 1.5px solid #e4e7ed !important;
  color: #409eff !important;
  font-weight: 500;
  transition: all 0.2s;
}
.beauty-btn:hover {
  background: #ecf5ff !important;
  color: #1867c0 !important;
  border-color: #b3d8ff !important;
}

/* 其它细节 */
.mb24 {
  margin-bottom: 28px;
}

/* 供应商模块统一间距 */
.supplier-block {
  margin-top: 32px;
}
.supplier-block:first-child {
  margin-top: 0;
}
</style>
